/* 看不到的， css inherit 继承 */
/* css reset  样式重置    对方是张白纸     */
* {
    margin:0;
    padding:0;
    }
    html {
    /* height: 100%; */
    font-size: 10px;
    background:url('./bg.webp') bottom center;
    background-size:cover;
    font-family:sans-serif;
    }
    
    .keys {
     display: flex;/*弹性布局*/
    /* flex-direction: column; */
    flex: 1;
     min-height: 100vh;
     /*vh viewportHeight 相对单位, 设备无关性的 px 是绝对单位*/
    /* background-color: red;  前端调试的法宝 */
    align-items: center;
 justify-content: center;
    }
    .key {
    border: .4rem solid black; /*rem 相对单位 相对于html font-size*/
    border-radius: .5rem;
    margin: 1rem;
    font-size: 1.5rem;
    padding: 1rem 0.5rem;
     width: 10rem;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 0.5rem black;
    /* 当元素的属性发生变化的时候，添加一个过渡的效果 */
    transition:all .07s ease;
    -webkit-transition:all .07s ease;/*谷歌*/
    -ms-transition:all .07s ease;/*微软*/
    }
    .key div {
    font-size: 4rem;
    }
    .key .sound {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    color: #ffc600;

    /* /*css过渡* */
    }
    .playing{
        border-color:#ffc600;
box-shadow: 0 0 1rem #ffc600;
        transform: scale(1,1);

    }